<template>
	<form bindsubmit="formSubmit">
		<view class='personal-data'>
			<view class='list'>
				<view class='item acea-row row-between-wrapper'>
					<view>头像</view>
					<view class='pictrue'>
						<image :src='userInfo.avatarUrl'></image>
					</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>名字</view>
					<view class='input'><input type='text' disabled='true' name='nickname' :value='userInfo.nickName'></input></view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>手机号码</view>
					<button name='phone' class='phone' :value='userInfo.phone' v-if="!userInfo.phone" @getphonenumber="getPhoneNumber"
					 hover-class='none' open-type='getPhoneNumber'>
						点击获取
					</button>
					<view class='input acea-row row-between-wrapper' v-else>
						<input type='text' disabled='true' name='phone' :value='userInfo.phone' class='id'></input>
						<text class='iconfont icon-suozi'></text>
					</view>
				</view>

				<view class='item acea-row row-between-wrapper'>
					<view>代理申请</view>
					<view class='input acea-row row-between-wrapper' v-if="userInfo.userLevel==2">
						<input type='text' disabled='true' :value='userInfo.userLevelDesc' class='id'></input>
						<text class='iconfont icon-huangguan'></text>
					</view>
					<view class='input acea-row row-between-wrapper' v-if="userInfo.status == 3">
						<input type='text' disabled='true' value='代理申请中，请耐心等待管理员审批...' class='id'></input>
						<text class='iconfont icon-huangguan'></text>
					</view>
					<button name='phone' class='phone' v-else hover-class='none' @tap="applyAgency">
						点击申请
					</button>
				</view>

				<view class='item acea-row row-between-wrapper'>
					<view>ID号</view>
					<view class='input acea-row row-between-wrapper'>
						<input type='text' :value='"1000"+userInfo.userId' disabled='true' class='id'></input>
						<text class='iconfont icon-suozi'></text>
					</view>
				</view>
			</view>
			<view v-if="userSharedUrl && userSharedUrl!=''" style="text-align:center;background-color:#fff;">
				<view>代理专属推广二维码（长按保存到相册）</view>
				<image class="img" :src="userSharedUrl" @longpress="saveShare" style="width:600rpx;height:600rpx;"></image>
			</view>
			<button class='modifyBnt' @tap="exitLogin">退 出</button>
		</view>
	</form>


</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				userInfo: {},
				userSharedUrl: ''
			}
		},
		onShow: function() {
			let that = this;
			//获取用户的登录信息
			that. userInfo = this.user;
			//如果无分享推广码,则需要获取分享二维码
			if (this.hasLogin && this.userSharedUrl == '') {
				that.getUserSharedUrl();
			}
		},
		methods: {
			...mapMutations(['setCode', 'login','logout']),
			getUserSharedUrl: function() {
				let that = this;
				that.$util.request(that.$api.api.GetSharedUrl).then(function(res) {
					that.userSharedUrl= res.data.userSharedUrl;
				});
			},
			applyAgency: function() {
				let that = this;
				if (!this.hasLogin) {
					uni.showToast({
						title: '绑定失败：请先登录',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (!this.userInfo.phone || this.userInfo.phone.length == 0) {
					uni.showToast({
						title: '绑定失败：请先绑定手机号',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				that.$util.request(that.$api.api.ApplyAgency, {
					desc: "代理申请"
				}, 'POST').then(function(res) {
					if (res.errno === 0) {
						let userInfo = that.user;
						userInfo.status = 3; //设置用户的状态为申请代理中...
						uni.setStorageSync('userInfo', userInfo);
						that.login(userInfo);
						that.userInfo = userInfo;
						uni.showToast({
							title: '申请成功，等待管理员审批',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			getPhoneNumber: function(e) {
				let that = this;
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					// 拒绝授权
					return;
				}

				if (!this.hasLogin) {
					uni.showToast({
						title: '绑定失败：请先登录',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				that.$util.request(that.$api.api.AuthBindPhone, {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}, 'POST').then(function(res) {
					if (res.errno === 0) {
						let userInfo = that.user;
						userInfo.phone = res.data.phone; //设置手机号码
						uni.setStorageSync('userInfo', userInfo);
						that.login(userInfo);
						that.userInfo = userInfo
						uni.showToast({
							title: '绑定手机号码成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			// 保存推广码到相册
			saveShare: function() {
				let that = this;
				uni.downloadFile({
					url: that.userSharedUrl,
					success: function(res) {
						console.log(res)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showModal({
									title: '推广码下载',
									content: '推广二维码成功保存到相册!!',
									showCancel: false,
									confirmText: '好的',
									confirmColor: '#a78845',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										}
									}
								})
							},
							fail: function(res) {
								console.log('fail')
							}
						})
					},
					fail: function() {
						console.log('fail')
					}
				})
			},
			exitLogin: function() {
				uni.showModal({
					title: '',
					confirmColor: '#b4282d',
					content: '退出登录？',
					success: function(res) {
						if (!res.confirm) {
							return;
						}

						this.$util.request(this.$api.api.AuthLogout, {}, 'POST');
						//app.globalData.hasLogin = false;
						this.logout();
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						uni.reLaunch({
							url: '../../index/index'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.personal-data .list {
		margin-top: 15rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		background-color: #85c43f;
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}

	.personal-data .modifyBnt {
		background-color: #85c43f;
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}
</style>
